<template>
    <el-header>
      <div class="header-content">
        <img src="@/assets/logo.jpg" alt="logo" class="logo">
        <el-menu class="header-navigation"
             mode="horizontal" 
             :default-active="$route.path"
             text-color="#333"
             active-text-color="#ff4d4f" 
             router
          >
            <el-menu-item index="/Index">首页</el-menu-item>
            <el-menu-item index="/Forum">病友交流圈</el-menu-item>
            <el-menu-item index="/AI_helper">AI小医聊</el-menu-item>
            <el-menu-item index="/PersonalCenter">个人中心</el-menu-item>
          </el-menu>
        <el-autocomplete
          v-model="searchKeyword"
          :fetch-suggestions="querySearch"
          placeholder="请输入搜索内容"
          clearable
          @keyup.enter="handleSearch"
          style="width: 300px;"
        >
          <template #append>
            <el-button icon="el-icon-search" @click="handleSearch"></el-button>
          </template>
        </el-autocomplete>
      </div>
    </el-header>
  </template>
  
  <script>
  export default {
    name: 'TopNavigation',
    props: {
      defaultActive: {
        type: String,
        default: '病友交流圈'
      },
      modelValue: {
        type: String,
        default: ''
      }
    },
    emits: ['update:modelValue', 'search', 'fetch-suggestions'],
    computed: {
      searchKeyword: {
        get() {
          return this.modelValue
        },
        set(value) {
          this.$emit('update:modelValue', value)
        }
      }
    },
    methods: {
      querySearch(queryString, cb) {
        this.$emit('fetch-suggestions', queryString, cb)
      },
      handleSearch() {
        this.$emit('search', this.searchKeyword)
      }
    }
  }
  </script>